<template>
  <el-dialog @close="jdysCancel('jdysRuleForm')" :close-on-click-modal="false"
    :title="`“${projectNodesItem.node_name}”节点验收`" :visible.sync="jdysVisible" width="600px">
    <div class="scroll-view">
      <el-form :model="jdysRuleForm" :rules="jdysRules" ref="jdysRuleForm" label-width="80px" label-position="top">
        <div v-for="(item, index) in jdysFormList" :key="index">
          <!-- 文本 -->
          <el-form-item :label="item.name" :prop="item.prop" v-if="item.content_type == 1">
            <el-input :rows="4" class="input-box" v-model="jdysRuleForm[item.prop]" type="textarea"></el-input>
          </el-form-item>
          <!-- 图片，视频 -->
          <el-form-item :label="item.name" :prop="item.prop" v-else>
            <div class="file-box">
              <el-upload :show-file-list="false" :auto-upload="false" action="#" class="avatar-uploader"
                accept="image/*,video/*" multiple :file-list="jdysRuleForm[item.prop]" :on-change="(file, fileList) => {
                  jdysFileChange(file, fileList, item.prop);
                }
                  ">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div class="img-box" v-for="(img, imgIndex) in jdysRuleForm[item.prop]" :key="imgIndex">
                <div class="operation-box">
                  <i class="iconfont icon-shanchu" @click.stop="jdysFileRemove(imgIndex, item.prop)"></i>
                </div>
                <!-- imgType -->

                <i v-if="!img.imgType" class="el-icon-video-play"></i>
                <video v-if="!img.imgType" class="img-item" :src="img.show"></video>
                <img v-if="img.imgType" class="img-item" :src="img.show" />
              </div>
            </div>
          </el-form-item>
        </div>
        <el-form-item label="备注" prop="remark">
          <el-input :rows="4" class="input-box" v-model="jdysRuleForm.remark" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="jdysCancel('jdysRuleForm')">关闭</el-button>
      <el-button type="primary" @click="jdysSubmit('jdysRuleForm')" :disabled="diaLoading" :loading="diaLoading">确
        定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import projectApi from "@/api/projectApi";

export default {
  name: "",
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false,
      required: false,
    },
    jdysRules: {
      required: false,
    },
    jdysRuleForm: {
      required: false,
    },
    jdysFormList: {
      required: false,
    },
    project_id: {
      required: false,
    },
    projectNodesItem: {
      required: false,
    },
  },
  data() {
    return {
      jdysVisible: false,
      diaLoading: false,
    };
  },
  watch: {
    addDialogVisible(val1, val2) {
      this.jdysVisible = this.addDialogVisible;
    },
  },
  computed: {},
  mounted() { },
  methods: {
    jdysCancel(formName) {
      let jdysRuleForm = this.jdysRuleForm;
      for (let i in jdysRuleForm) {
        typeof jdysRuleForm[i] == "string"
          ? (jdysRuleForm[i] = "")
          : (jdysRuleForm[i] = []);
      }
      this.jdysRuleForm = jdysRuleForm;
      this.$nextTick(() => {
        this.$refs[formName].clearValidate();
        this.$emit("onClose", true);
      });
    },
    jdysFileChange(file, list, type) {
      let jdysRuleForm = this.jdysRuleForm;
      list.forEach((item) => {
        item.show = URL.createObjectURL(item.raw);
        item.imgType = item.raw.type.startsWith("image/"); //是否图片
      });
      jdysRuleForm[type] = list;
      this.jdysRuleForm = jdysRuleForm;
    },
    jdysFileRemove(index, type) {
      let jdysRuleForm = this.jdysRuleForm;
      jdysRuleForm[type].splice(index, 1);
      this.jdysRuleForm = jdysRuleForm;
    },
    jdysSubmit(formName) {
      let jdysRuleForm = this.jdysRuleForm;
      let projectNodesItem = this.projectNodesItem;
      console.log(jdysRuleForm, "节点验收参数", projectNodesItem);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.diaLoading = true;
          let formdata = new FormData();
          let obj = {
            project_id: this.project_id,
            node_id: this.projectNodesItem.id,
            remark: jdysRuleForm.remark
          };
          projectNodesItem.children.forEach(item => {
            let key = `name_${item.id}`;
            obj[key] = item.node_name;
          })
          for (let i in jdysRuleForm) {
            if (typeof jdysRuleForm[i] == "string") {
              // 文本
              obj[i] = jdysRuleForm[i];
            } else {

              // 文件
              jdysRuleForm[i].forEach((item) => {
                formdata.append(`${i}[]`, item.raw);
              });
            }
          }
          formdata.append("data", JSON.stringify(obj));
          projectApi
            .nodeAcceptance(formdata)
            .then((res) => {
              console.log(res, "节点验收");
              this.diaLoading = false;
              if (res.code == 200) {
                this.$emit("onSuccess", true);
              }
              this.$message({
                type: res.code == 200 ? "success" : "warning",
                message: res.code == 200 ? "处理成功" : res.message,
              });
            })
            .catch((err) => {
              this.diaLoading = false;
              this.$message({
                type: "warning",
                message: err.message,
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>